import QtQuick 1.1
import com.nokia.meego 1.1
import StarMenu 1.0

Item {
    id: mainButton
    property int itemsW: 100
    property int itemsH: 36
    width: parent.width; height: parent.height

    StarMenu {
        anchors.fill: parent
        starCenterVisible: false
        shape: StarMenu.ShapeLine
        visualParent: main
        color: Qt.rgba(0,0,0,0.6)
        delayChangePos: 150
        radiusIncrement: 0
        startingAngle: -90
        startingRadius: 0
        center.x: mainButton.x+mainButton.itemsW/2
        center.y: mainButton.y+mainButton.height+mainButton.itemsH/2


        StarItem {
            id: firstItem
            width: mainButton.itemsW; height: mainButton.itemsH
            Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on opacity  { NumberAnimation { duration: 1000 } }

            SMbutton {
                anchors.fill: parent
                text: "item 1"
            }
        }

        StarItem {
            id: secondItem
            width: mainButton.itemsW; height: mainButton.itemsH
            Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on opacity  { NumberAnimation { duration: 1000 } }

            SMbutton {
                anchors.fill: parent
                text: "submenu"
            }
            StarMenu {
                anchors.fill: parent
                starCenterVisible: false
                shape: StarMenu.ShapeLine
                visualParent: main
                parentVisible: true
                delayChangePos: 150
                radiusIncrement: 0
                startingAngle: -90
                startingRadius: 0
                center.x: mainButton.x+mainButton.itemsW+mainButton.itemsW/2
                center.y: secondItem.y+secondItem.height/2
                StarItem {
                    width: mainButton.itemsW; height: mainButton.itemsH
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 1000 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 1"
                    }
                }
                StarItem {
                    width: mainButton.itemsW; height: mainButton.itemsH
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 1000 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 2"
                    }
                }
                StarItem {
                    width: mainButton.itemsW; height: mainButton.itemsH
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 1000 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 3"
                    }
                }
                StarItem {
                    width: mainButton.itemsW; height: mainButton.itemsH
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 1000 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 4"
                    }
                }

            }
        }

        StarItem {
            width: mainButton.itemsW; height: mainButton.itemsH
            Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on opacity  { NumberAnimation { duration: 1000 } }

            SMbutton {
                anchors.fill: parent
                text: "item 3"
            }
        }

        StarItem {
            width: mainButton.itemsW; height: mainButton.itemsH
            Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 800; easing.type: Easing.OutBounce } }
            Behavior on opacity  { NumberAnimation { duration: 1000 } }

            SMbutton {
                anchors.fill: parent
                text: "item 4"
            }
        }
    }
}
